<a name="top"></a>
<div class="grid_9">
	<h2>References</h2>
	
	<p>For our Internet Technologies photo upload project (Upload[IT]) we have utilized a number of open source technologies to allow us to meet many of our goals and requirements. We have set a high standard for ourselves with this project in terms of: Accessibility, Usability, Design and Modularity. Using existing open source technologies we are able to speed up our development as well as meet these standards, the technologies we have implemented are outlined below:</p>
	
	<h3 id="javascript">1 Javascript</h3>
	
	<h4>1.1 jQuery</h4>
	<p>We have chosen the jQuery library as a Javascript framework. From the jQuery website:<br/>
		<blockquote cite="http://jquery.com">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</blockquote></p>
	<p>Specifically we are using jQuery with plugins to manipulate the <abbr title="Document Object Model">DOM</abbr> and enhance the user experience. We reference the jQuery library on the jquery.com server rather than our own server for multiple reasons:
		<ol>
			<li>Users visiting our website may have jQuery already cached in their system</li>
			<li>Serving content (javascript, css, images etc.) from separate urls allows for simultaneous download</li>
		</ol>
	</p>
	<p><a href="http://jquery.com">Visit the jQuery website</a></p>
	
	<h4>1.2 Cross Slide jQuery plugin</h4>
	<p>We wanted to use a Ken Burns effect for image transitions on our home screen, Ken Burns being a popular transition effect for photographers. This effect is widely available in desktop software packages (eg. iPhoto) and by using Flash however not so in the javascript world. We managed to find one open source plugin called CrossSlide which we plan to develop further to allow pausing, skipping and linking to other pages.</p>
	<p><a href="http://tobia.github.com/CrossSlide/">Visit the CrossSlide website</a></p>
	
	<h4>1.3 prettyPhoto jQuery plugin</h4>
	<p>We wanted the image gallery thumbails to link to a Lightbox (hovering div) rather than link through to a separate page. This would allow for a more user friendly browsing experience. We found an open source jQuery plugin named prettyPhoto to be one of the better solutions with easy browsing through images and theming possibilities.</p>
	<p><a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">Visit the prettyPhoto website</a></p>
	
	
	<h3 id="css">2 CSS</h3>
	
	<h4>2.1 Less CSS</h4>
	<p>To further speed development we are implementing Less CSS, Less is an extension of CSS that allows dynamic content such as variables, mixins, operations and functions. This allows us to keep the CSS extremely modular, eg. changing a standard colour used across the CSS file requires only changing the colour variable. Originally designed to be used with a Javascript library allowing browsers to implement Less we have decided to compile Less as seperate CSS files allowing for maximum compatibility. The Less CSS files can be found under <code>"<a href="{base_uri}styles/less">/styles/less</a>"</code> and the compiled css under <code>"<a href="{base_uri}styles/css">/styles/css</a>"</code>.</p>
	<p><a href="http://lesscss.org/">Visit the Less CSS website</a></p>
	
	<h4>2.2 960 Grid System</h4>
	<p>We use a 12 column 960 pixel wide grid provided by 960 Grid System. Each column is 60 pixels wide with a 20 pixel gutter between. Using a grid speeds layout development and reduces the need for defining widths inside the main CSS, it potentially also means we could switch grid dimensions in the future or serve a mobile version based on a smaller resolution. 960 Grid System also provides a CSS reset (resetting default styling across browsers) and a basic typography CSS both of which we implement.</p>
	<p><a href="http://960.gs/">Visit the 960 Grid System website</a></p>
	
	<h4>2.3 Google Web Fonts</h4>
	<p>Traditionally very few fonts are installed by default on all platforms meaning web designers have to stick to these particular fonts to ensure a web page will be consistent across all browsers and systems. Google Web Fonts introduces cross-platform open source fonts, allowing fonts to be dynamically loaded and set through CSS without having to worry whether a visitor has that font installed on their system.</p>
	<p><a href="http://www.google.com/webfonts">Visit the Google Web Fonts website</a></p>
	
	
	<h3 id="php">3 PHP</h3>
	
	<h4>3.1 Minify</h4>
	<p>We are dedicated to delivering content in the fastest and most efficient manner. Minify is an open source php project that allows for fast combining, compressing, serving and cacheing of CSS and Javascript. This reduces not only the payload of HTTP requests but the number of actual HTTP requests by combining multiple files into one. Furthermore Minify allows for shorter URLs by predefining groups.</p>
	<p><a href="http://code.google.com/p/minify/">Visit the Minify website</a></p>
	
	<h4>3.2 PHP Basic Templating</h4>
	<p>We have developed our own basic PHP templating system that allows content to be stored separately from the HTML template. It is basically a stripped down "MVC" framework to simply a "V" framework. Here is a quick run-through of its process:
		<ol>
			<li>The htaccess file serves any HTTP_REQUEST that is not specifically an existing file or folder to index.php</li>
			<li>The index.php checks the server name, if operating on a localhost (or local.* etc.) it sets the environment to development, otherwise we assume the environment is live.</li>
			<li>Looking at the path info (the uri) index.php then checks to see if there is a corresponding .html file in the /content folder, if not we serve a 404, additionally it serves the home.html file if path info is blank.</li>
			<li>If the environment is set to "live" index.php checks first if there is a cached version, if so it will check if the cached timestamp is newer than the actual content html file as well as the index.html (our template) file and index.php (itself), if all is good it will serve the cached HTML and exit.</li>
			<li>Otherwise index.php loads the index.html file (the template), it separately loads the content html based on the path info, it then combines the HTML and saves the generated output into the cache.</li>
		</ol>
	</p>
	
</div>

<aside class="grid_3 sticky">
	<h5>Contents</h5>
	<nav>
		<a href="#javascript">1 Javascript</a>
		<a href="#css">2 CSS</a>
		<a href="#php">3 PHP</a>
		<a href="#top" class="return">Return to top</a>
	</nav>
</aside>